import { Tag } from 'antd'
import { ellipsis } from '@/desktop/styles'
import { useStreams, unique } from '@/lib/utils'
import services from '@/services'
import { useTags } from '../edit/choose-target-by-tag'
import { type Task } from '../logics'

export function TargetTags({ task }: { task: Task }) {
  const [qywxMap] = useStreams(services.qywxs.alives)
  const corpIds = useMemo(() => unique([...qywxMap.values()].map(v => v.corpid)), [qywxMap])
  const allTags = useTags(corpIds)
  const tagMap = useMemo(() => new Map(allTags.map(tag => [tag.id, tag])), [allTags])

  return <div css={s.tags}>
    {task.tagIds.map(tagId => <Tag key={tagId} css={s.tag}>
      {tagMap.get(tagId)?.name ?? tagId}
    </Tag>)}
  </div>
}

const s = {
  tags: css`
    column-gap: 8px;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    row-gap: 8px;
  `,
  tag: css`
    ${ellipsis};
    margin-right: 0;
  `,
}
